var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//当鼠标经过和离开preview_img时，mask遮挡层和big大盒子会显示和隐藏
preview_img.addEventListener('mouseover',function(){
    mask.style.display = 'block';
    big.style.display = 'block';
})
preview_img.addEventListener('mouseout',function(){
    mask.style.display = 'none';
    big.style.display = 'none';
})
preview_img.addEventListener('mousemove',function(e){
    var x = e.pageX - this.offsetLeft; //鼠标相对于preview_img盒子的横坐标
    var y = e.pageY - this.offsetTop;//鼠标相对于preview_img盒子的纵坐标
    var maskX = x - mask.offsetWidth / 2; //遮罩层左边框距离preview_img的距离
    var maskY = y - mask.offsetHeight / 2;  //遮罩层上边框距离preview_img的距离
    var maskMax = this.offsetWidth - mask.offsetWidth;  //鼠标移动最大距离
    //设置mask遮盖层移动的距离范围
    if(maskX <= 0){
        maskX = 0;
    }else if(maskX >= maskMax){   
        maskX = maskMax;
    }
    if(maskY <= 0) {
        maskY = 0;
    }else if(maskY >= maskMax){
        maskY = maskMax;
    }
    mask.style.left = maskX +'px';
    mask.style.top = maskY + 'px';
    //大图片的移动距离 = 遮罩层移动距离 * 大图片最大移动距离 / 遮罩层的最大移动距离
    var bigImg = document.querySelector('.bigImg');
    //大图片最大移动距离
    var bigX = 1.25 * maskX;
    var bigY = 1.25 * maskY;
    bigImg.style.left = -bigX + 'px';
    bigImg.style.top = -bigY + 'px';
})
